<template>
  <view>
    <view
      v-if="visible"
      class="fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300"
      :class="visible ? 'opacity-100' : 'opacity-0'"
      @click="closeModal"
    />

    <view
      class="fixed left-0 bg-main1 right-0 bt-safe z-50 bg-white rounded-t-2xl shadow-xl transition-transform duration-300 ease-out"
      :class="visible ? 'translate-y-0' : 'translate-y-full'"
      :style="{ height: '80%', maxHeight: '80%' }"
    >
      <view class="overflow-y-auto h-[calc(100%-56px)] pt-safe" v-if="props.article">
        <view class="px-4 py-3">
          <!-- Title -->
          <view class="text-xl font-bold text-gray-900 mb-2">{{ props.article.newsTitle }}</view>

          <view class="flex items-center text-sm text-gray-500 mb-4">
            <text>{{ formatDate(props.article.time) }}</text>
            <view class="w-1 h-1 rounded-full bg-gray-300 mx-2"></view>
            <text>{{ props.article.createBy }}</text>
            <view class="w-1 h-1 rounded-full bg-gray-300 mx-2"></view>
            <i class="iconfont icon-Icon_eyes w-3 text-3 mr-1"></i>
            <text>{{ props.article.readingVolume }}人已读</text>
          </view>

          <view class="mb-4 overflow-hidden flex flex-col justify-evenly">
            <image
              v-for="image in parseImageList(props.article.newsImage)"
              :key="image"
              :src="image"
              :alt="props.article.newsTitle"
              class="w-full h-48 object-cover rounded-lg mb-1"
            />
          </view>

          <view
            class="text-gray-800 leading-relaxed mb-4"
            v-html="props.article.newsContent"
          ></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  article: {
    type: Object,
    default: () => null,
  },
})

const parseImageList = (images) => {
  return images.split(',')
}

const emit = defineEmits(['close'])

// Format date to readable string
const formatDate = (date: Date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}

// Close modal and emit event
const closeModal = () => {
  emit('close')
}
</script>

<style scoped>
/* Safe area padding for iOS devices */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 80px);
}

/* Line clamp for truncating text */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
